<template>
    <div id="claim-customer">
        <scroller lock-x scrollbar-y use-pullup @on-pullup-loading="loadMore"  v-model="status" ref="scroller">
          <div class="box2">
            <load-more v-if="detaillist.length === 0" :show-loading="false" :tip="'暂无已认领客户'"  background-color="#fbf9fe"></load-more>
            <div class="product-deal" v-for="(item, index) in detaillist" :key="index">
                <flexbox>
                    <flexbox-item><div class="flex-demo"><span>{{item.customerName}}</span><span v-if="item.apply">{{item.apply}}</span></div></flexbox-item>
                    <flexbox-item><div class="flex-demo"><span>{{item.purchaseTime | datereserve}}</span></div></flexbox-item>
                </flexbox>
                <flexbox>
                    <flexbox-item><div class="flex-demo">需求:<span>{{item.applyBalance}}元</span><span>{{item.applyTerm}}个月</span></div></flexbox-item>
                    <flexbox-item :span="4"><div class="flex-demo" @click="contact(index)"><img src="../../static/img/dianhua@2x.png" /><span>联系客户</span></div></flexbox-item>
                </flexbox>
                <flexbox>
                    <flexbox-item><div class="flex-demo"></div></flexbox-item>
                    <flexbox-item v-if="item.canFly === true"><div class="flex-demo" @click="transfer(index)"><img src="../../static/img/zhuanran@2x.png" /><span>转给平台</span></div></flexbox-item>
                </flexbox>
            </div>
            <div class="transfer">
              <h5>转让须知</h5>
              <p>1、已认领客户资料中，展示该客户的姓名、认领时间、借款需求。默认按照认领时间倒序排列。</p>
              <p>2、点击联系客户，可直接拨打电话，不再收费。</p>
              <p>3、若客户通过信贷动力申请读秒并有状态更新，需将状态同步展示在已认领客户中，客户列表中仍进行展示。</p>
              <p>4、客户认领满3天后，可再次转给平台。再次转给平台时，根据用户情况减少转让价格。</p>
          </div>
        </div>
        <div slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 40px; bottom: -40px; text-align: center;">
          <span v-show="status.pullupStatus === 'default'"></span>
          <span class="pullup-arrow" v-show="status.pullupStatus === 'up'" :class="{'rotate': status.pullupStatus === 'up'}">松开加载</span>
          <span v-show="status.pullupStatus === 'loading'"><spinner type="ios-small"></spinner></span>
        </div>
      </scroller>
        
    </div>
</template>
<script>
var timeStamp = String(Number(new Date()))
import { Flexbox, FlexboxItem, LoadMore, Scroller, Spinner } from 'vux'
import api from '../api'
import utils from '../utils'
export default {
  data () {
    return {
      detaillist: [],
      tokenval: '',
      PageNum: 100, // 记录每页数
      count: 1,
      pullupEnabled: true,
      status: {
        pullupStatus: 'default',
        pulldownStatus: 'default'
      }
    }
  },
  components: {
    Flexbox,
    FlexboxItem,
    LoadMore,
    Scroller,
    Spinner
  },
  created () {
    this.tokenval = utils.AuthToken(timeStamp, this.$store.state.userkey)
    var params = {
      Tokenuser: this.tokenval,
      userid: this.$store.state.userID,
      timestamp: timeStamp,
      page: 1,
      perPage: 100
    }
    api.claim(params).then(res => {
      console.log(res)
      this.detaillist = res.data.list
    })
  },
  methods: {
    loadMore () {
      this.count ++
      this.PageNum = 10 * this.count + 100
      this.$vux.loading.show({
        text: '加载更多'
      })
      setTimeout(() => {
        this.loadmore(this.PageNum)
        setTimeout(() => {
          this.$refs.scroller.donePullup()
        }, 10)
      }, 2000)
    },
    loadmore (index) {
      this.detaillist = []
      var params = {
        Tokenuser: this.tokenval,
        userid: this.$store.state.userID,
        timestamp: timeStamp,
        page: 1,
        perPage: index
      }
      api.claim(params).then(res => {
        console.log(res)
        this.detaillist = res.data.list
      })
    },
    // 联系客服
    contact (index) {
      api.relocation({
        token: this.tokenval,
        timestamp: timeStamp,
        userId: this.$store.state.userID,
        id: this.detaillist[index].id,
        fromType: 1
      }).then(res => {
        if (res.status === '200') {
          var mobilelocation = res.data.mobile
          window.location.href = `tel:${mobilelocation}`
        }
      })
    },
    transfer (index) {
      var self = this
      api.feemessage({
        token: this.tokenval,
        timestamp: timeStamp,
        userId: this.$store.state.userID,
        id: this.detaillist[index].id,
        fromType: 1,
        feeType: 0
      }).then(res => {
        console.log(res)
        if (res.status === '200') {
          var transf = res.data.transfer
          this.$vux.confirm.show({
            title: '提示',
            content: '转让该客户，您将获得平台奖励' + transf + '元，客户被购买后奖励立刻到账，同时您将无法与客户继续联系。是否转让？',
            confirmText: '确认转让',
            cancelText: '取消转让',
            onCancel () {
              console.log('plugin cancel')
            },
            onConfirm () {
              api.ordercession({
                token: self.tokenval,
                timestamp: timeStamp,
                userId: self.$store.state.userID,
                id: self.detaillist[index].id
              }).then(res => {
                console.log(res)
                if (res.status === '200') {
                  self.$router.push('/fly/index')
                } else {
                  self.$vux.toast.show({
                    text: res.message,
                    type: 'success',
                    width: '4rem'
                  })
                }
              })
            }
          })
        }
      })
    }
  }
}
</script>
